<template>
  <div>
    <employee_head username="销量上报"></employee_head>
    <span style="padding:10px;font-size:12px;">请选择时间:</span>
    <input type="date" class="form-control">
    <ul class="list">
      <li @click="showA" :class='{select:food}'>食品仓库</li>
      <li @click="showB" :class='{select:drink}'>饮料仓库</li>
      <li @click="showC" :class='{select:livinggoods}'>日用品仓库</li>
    </ul>
    <!-- 食品仓库 -->
    <table class="table" v-show="food">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list1" :key="index">
          <th>{{item.id}}</th>
          <th>{{item.name}}</th>
          <th>{{item.price}}</th>
          <th style="width:25%;"><input class="form-control" v-model="item.number"></th>
        </tr>
      </tbody>
      <div style="height:50px;"></div>
    </table>
    <!-- 饮料仓库 -->
    <table class="table" v-show="drink">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list2" :key="index">
          <th>{{item.id}}</th>
          <th>{{item.name}}</th>
          <th>{{item.price}}</th>
          <th style="width:25%;"><input class="form-control" v-model="item.number"></th>
        </tr>
      </tbody>
      <div style="height:50px;"></div>
    </table>
    <!-- 日用品仓库 -->
    <table class="table" v-show="livinggoods">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list3" :key="index">
          <th>{{item.id}}</th>
          <th>{{item.name}}</th>
          <th>{{item.price}}</th>
          <th style="width:25%;"><input class="form-control" v-model="item.number"></th>
        </tr>
      </tbody>
      <div style="height:50px;"></div>
    </table>
    <div class="foot">
      <button class="btn btn-sm" style="background-color: lightpink;color:white;" @click="emit" :disabled="disbutton">提交</button>
      <span>总价格:{{totalprice}}</span>
    </div>
  </div>
</template>

<script>
  import employee_head from "./employee_head.vue"
  export default {
    name: "employee_salesreport",
    components: {
      employee_head
    },
    data() {
      return {
        list1: "",
        list2: "",
        list3: "",
        food: true,
        drink: false,
        livinggoods: false,
      }
    },
    methods: {
      // 食品仓库
      showA() {
        this.food = true
        this.drink = false
        this.livinggoods = false
      },
      showB() {
        this.food = false
        this.drink = true
        this.livinggoods = false
      },
      showC() {
        this.food = false
        this.drink = false
        this.livinggoods = true
      },
      emit(){
        var obj={
          xs:this.totalprice,
          sy:this.totalprice*0.1
        }
        window.localStorage.setItem("money",JSON.stringify(obj))
        // 提交具体购买的物品
        var saleFood=[]
        var saleDrink=[]
        var saleLivingGoods=[]
        for(var i=0;i<this.list1.length;i++){
          if(this.list1[i].number!=0){
            saleFood.push(this.list1[i])
          }
        }
        //
        for(var i=0;i<this.list2.length;i++){
          if(this.list2[i].number!=0){
            saleDrink.push(this.list2[i])
          }
        }
        //
        for(var i=0;i<this.list3.length;i++){
          if(this.list3[i].number!=0){
            saleLivingGoods.push(this.list3[i])
          }
        }
        var salelist={
          saleFood:saleFood,
          saleDrink:saleDrink,
          saleLivingGoods:saleLivingGoods
        }
        window.localStorage.setItem("salelist",JSON.stringify(salelist))
      }
    },
    //计算每个仓库的总价
    computed: {
      totalprice() {
        var k = 0
        for (var i = 0; i < this.list1.length; i++) {
          k += this.list1[i].number * this.list1[i].price
        }
        for (var i = 0; i < this.list2.length; i++) {
          k += this.list2[i].number * this.list2[i].price
        }
        for (var i = 0; i < this.list3.length; i++) {
          k += this.list3[i].number * this.list3[i].price
        }
        return k
      },
      disbutton(){
        var k=true
        if(this.totalprice!=0){
          k=false
        }
        else{
          k=true
        }
        return k
      }
    },
    created() {
      var address = ["listFood", "listDrink", "listLivingGoods"]
      var url0 = this.HOST + address[0]
      var url1 = this.HOST + address[1]
      var url2 = this.HOST + address[2]
      this.$axios.get(url0).then(res => {
        this.list1 = res.data.data
        for (var i = 0; i < this.list1.length; i++) {
          this.list1[i].number = 0
        }
      }, err => {
        console.log(err)
      })
      this.$axios.get(url1).then(res => {
        this.list2 = res.data.data
        for (var i = 0; i < this.list2.length; i++) {
          this.list2[i].number = 0
        }
      }, err => {
        console.log(err)
      })
      this.$axios.get(url2).then(res => {
        this.list3 = res.data.data
        for (var i = 0; i < this.list3.length; i++) {
          this.list3[i].number = 0
        }
      }, err => {
        console.log(err)
      })
    }
  }
</script>

<style scoped="scoped">
  ul,
  li,
  p {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .list {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .list li {
    width: 40%;
    text-align: center;
    line-height: 40px;
  }

  .select {
    background-color: lightpink;
    color: white;
  }

  .foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top: 1px solid lightpink;
    background-color: white;
  }

  .foot span {
    margin-left: 20px;
    font-size: 12px;
  }
</style>
